Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-from-dom

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-from-dom

Convert HTML/XML source code or DOM nodes to React elements

  • 0.2.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
197K
decreased by-28.9%
Maintainers
1
Weekly downloads
 
Created
Source

react-from-dom

NPM version build status Maintainability Test Coverage

Convert HTML/XML source code or a DOM node to a React element.
The perfect replacement for React's dangerouslySetInnerHTML

Setup

Install it

npm install react-from-dom

Getting Started

Set a string with HTML/XML source code OR a DOM Node which it will be used to create React elements recursively.

import React from 'react';
import convert from 'react-from-dom';

const panel = convert(`
<div class="panel">
  <div class="panel-header">
    <h2>Title</h2>
  </div>
  <div class="panel-content">
    <ul>
      <li>line 1</li>
      <li>line 2</li>
    </ul>
  </div>
  <div class="panel-footer">
    Footer
  </div>
</div>
`);

const audio = document.createElement('audio');
audio.setAttribute('controls', 'true');
audio.setAttribute(
  'src',
  'https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3',
);
const audioContent = document.createTextNode('Your browser does not support the audio element.');
audio.appendChild(audioContent);

const audioElement = convert(audio);

const App = () => (
  <div>
    {panel}
    {audioElement}
  </div>
);

API

The function accepts two parameters:

input {string|Node} - required
An HTML/XML source code string or a DOM node.

options {object} - optional

  • actions {Action[]}
    An array of actions to parse your input before converting.
    Read about them below.
  • nodeOnly {boolean}
    Return the DOM Node instead of a React Element.
    Only used for string inputs.
  • selector {string}
    The CSS selector used to get your entry. Default: body > *
    Only used for string inputs.
  • type {string}
    The mimeType used by DOMParser's parseFromString. Default: text/html
    Only used for string inputs.

Actions

You can mutate/update a Node before the conversion or replace it with a ReactNode.

{
  // If this returns true, the two following functions are called if they are defined
  condition: (node: Node, key: string, level: number) => boolean;

  // Use this to update or replace the node
  // e.g. for removing or adding attributes, changing the node type
  pre?: (node: Node, key: string, level: number) => Node;

  // Use this to inject a component or remove the node
  // It must return something that can be rendered by React
  post?: (node: Node, key: string, level: number) => React.ReactNode;
}
Examples
Add a class to all elements that match
{
  condition: node => node.nodeName.toLowerCase() === 'div',
  pre: node => {
    node.className += ' a-class-added';
    return node;
  },
}
Remove all elements with a certain class
{
  condition: node => node.className.indexOf('delete-me') >= 0,
  post: () => null,
}
Return a react component for some node types
{
  condition: node => node.nodeName.toLowerCase() === 'pre',
  post: (node, key) => (
    <ReactMarkdown key={key} source={node.textContent} />
  ),
},
Transform one node into another and preserve the childNodes
{
  condition: node => node.nodeName.toLowerCase() === 'ul',
  pre: (node) => {
    const ol = document.createElement('ol');
    
    [...node.childNodes].forEach(child => {
      ol.appendChild(child);
    });
    
    return ol;
  }
}

Credits

This is a fork from dom-to-react package. Thanks! ❤️

Keywords

FAQs

Package last updated on 28 Jul 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc